<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* * {
        margin: 0;
        padding: 0;
    }

    body {
        width: 100%;
        height: 100%;
        background: rgba(000, 000, 000, 0.5);
    }

    #box {
        width: 520px;
        height: 520px;
        text-align: center;
        line-height: 520px;
        margin: auto;
        background: yellow;
        display: none;
    }

    #but {
        width: 20px;
        height: 20px;
        float: right;
    } */


    * {
        margin: 0 auto;
    }

    body {
        position: relative;
    }

    #advert {
        width: 500px;
        height: 500px;
        background: burlywood;
        position: absolute;
        left: 37%;
        top: 150px;
        z-index: 9999;
    }

    #cover {
        width: 100%;
        background: rgba(000, 000, 000, 0.5);
        position: absolute;
        left: 0;
        top: 0;
        z-index: 999;
    }
</style>

<body>

    <!-- <div id="box">
        <p><span>5</span>秒后自动关闭 <button id="but">×</button></p>
    </div> -->

    <div id="advert">
        <span>我是广告（<i id="ns">5</i>）秒后自动关闭</span>
        <button id="btnoff" style="float: right; width: 40px">×</button>
    </div>
    <div id="cover"></div>

    <script>


        var n = 5
        var ntime

        window.onload = function () {

        document.getElementById('btnoff').addEventListener('click', function () {
            document.getElementById('advert').style.display = 'none'
            document.getElementById('cover').style.display = 'none'
        })
        ntime = setInterval(function () {
            document.getElementById('ns').innerHTML = --n
            if (n == 0) {
                document.getElementById('advert').style.display = 'none'
                document.getElementById('cover').style.display = 'none'
                clearInterval(ntime)
            }
        }, 1000)
    }





        // var s = 5
        // var time

        // window.onload = function () {

        //     document.getElementById(but).addEventListener('click',function(){
        //         document.getElementById('box').style.display = 'none'
        //         // document.getElementById('span').style.display = 'none'
        //     })
        //     time = setInterval(function(){
        //         document.getElementById('span').innerHTML = --
        //         if (s == 0) {
        //             document.getElementById('')
        //         }
        //     })

            // but.onclick = function () {
            //     box.style.display = 'block'
            //     if (s == 0) {
            //         setInterval(function () {

            //         }, 1000)
            //     }


            // }

            // document.getElementById('but').onclick = function () {

            //     if(s == 0){
            //         setInterval(function(){
            //             s--
            //         },1000)
            //     }

            // }
        // }




        // but.onclick = function () {
        //     var time = 1
        //     time = setInterval(
        //         function () {
        //             // time--
        //             // box.style.display = `block`
        //             for (var a = 5; a > time; a--) {
        //                 time--
        //             }
        //             box.innerHTML = `<h1>还有${a}秒后关闭</h1>`
        //         }, 1000

        //     )




        //     if (box.innerHTML == '点击') {
        //         box.style.display = block
        //     } else {
        //         box.style.display = none
        //     }


        // }
    </script>

</body>

</html>